<script>
import axios from "axios";
import DynamicDetail from "@/components/dialog/DynamicDetail.vue";
import ReviewDetail from "@/components/dialog/ReviewDetail.vue";

export default {
  name: "HomeDynamic",
  components: {ReviewDetail, DynamicDetail},
  data() {
    return {
      dynamic_list: [],
      dynamic_loading: false,
      dynamicId: '',
      reviewId: "",
      review_input: "",
      reviewTitle: "",
      review_dialog: false,
      review_item: "",
      reviewList_dialog: false
    }
  },
  methods: {
    dzClick1(e, id, index) {
      let div = e.target
      if (div.tagName !== 'I') {
        div = div.firstElementChild
      }
      if (div.classList.contains('icon-dianzan')) {
        axios.get(`api/dynamic/like/${id}`)
            .then(res => {
              if (res.data.code === 0) {
                div.classList.remove('icon-dianzan')
                div.classList.add('icon-dianzan_kuai')
                this.dynamic_list[index].likes++
                div.classList.add('f_color')
              } else {
                this.$message.warning(res.data.msg)
              }
            })

      } else {
        axios.get(`api/dynamic/unlike/${id}`)
            .then(res => {
              if (res.data.code === 0) {
                div.classList.remove('icon-dianzan_kuai')
                div.classList.remove('f_color')
                div.classList.add('icon-dianzan')
                this.dynamic_list[index].likes--
              } else {
                this.$message.warning(res.data.msg)
              }
            })
      }
    },
    getList() {
      this.dynamic_loading = true
      axios.get("/api/dynamic/list/my")
          .then(res => {
            this.dynamic_loading = false
            if (res.data.code === 0) {
              this.dynamic_list = res.data.data
            } else {
              this.$message.warning(res.data.msg)
            }
          }).catch(err => this.$message.error(err))
    },
    showBigPic(e) {
      let big = document.getElementsByClassName('big_pic')[0]
      big.parentNode.style.display = 'flex'
      big.src = e.target.src
    },
    exitBigPic(e) {
      let div = e.target
      if (div.tagName === 'IMG')
        div = div.parentNode
      div.style.display = 'none'
    },
    back() {
      this.dynamicId = ''
    },
    setReview(item) {
      this.reviewId = item.id
      this.review_input = ''
      this.reviewTitle = '回复@' + item.nickname
      this.review_dialog = true
    },
    setRecover(item) {
      this.review_item = item
      this.reviewList_dialog = true
    },
    recover() {
      if (this.review_input !== '') {
        axios.get(`/api/review/recover/${this.reviewId}/${this.review_input}`)
            .then(res => {
              if (res.data.code === 0) {
                this.$message.success("回复成功")
                this.review_dialog = false
                if (!this.reviewList_dialog) {
                  if (this.dynamicId === '') {
                    this.getDynamicList()
                  } else {
                    this.$bus.$emit('setHaveReview')
                  }
                } else {
                  this.$bus.$emit('getRecover')
                }

              } else {
                this.$message.warning(res.data.msg)
              }
            }).catch(err => this.$message.error(err))
      } else {
        this.$message.warning("请输入内容")
      }

    },
    setReviewId() {
      this.reviewId = ''
    },
    exitRecover() {
      this.reviewList_dialog = false
    },

  },
  mounted() {
    this.getList()
  }
}
</script>

<template>
  <div>

    <el-dialog :visible.sync="review_dialog" :title="reviewTitle" top="20vh" width="35%" :close="setReviewId"
               append-to-body destroy-on-close>
      <div class="hf_box">
        <el-input type="textarea" placeholder="发布你的回复" v-model="review_input"
                  resize="none" :maxlength="256" :rows="3"></el-input>
      </div>
      <button class="pl_btn hf_btn" @click="recover">回复</button>
    </el-dialog>


    <el-dialog :visible.sync="reviewList_dialog" top="10vh" width="40%" append-to-body destroy-on-close>
      <review-detail :review="review_item" :init="reviewList_dialog" @exit="exitRecover" @setReview="setReview"
                     @getDynamicList="getList"></review-detail>
    </el-dialog>
    <div v-if="dynamicId === ''">
      <div class="cont_cont_box" v-for="(item,index) in dynamic_list" :key="index" v-loading="dynamic_loading">
        <div class="ccb_top">
          <el-avatar :src="item.avatar"
                     class="ccb_avatar"></el-avatar>
          <div class="ccb_top_right">
            <div class="ccb_nick">{{ item.nickname }}
              <i class="el-icon-lock" style="color: #409EFF" v-show="item.status === 0"></i>
              <i class="el-icon-help" style="color: #409EFF" v-show="item.status === 2"></i>

            </div>
            <div class="ccb_time">{{ item.time }}</div>
          </div>
        </div>
        <div class="ccb_text_box">
          {{ item.content }}
        </div>
        <div class="ccb_pic_box" v-if="item.attachments.length > 0">
          <div class="pic_box_item" v-for="(p_item,p_index) in item.attachments" :key="p_index">
            <img class="small_pic" :src="p_item" alt=""
                 @click="showBigPic">
          </div>
        </div>
        <div class="ccb_cz_box">
          <div class="cz_box"><i class="iconfont icon-fenxiang1"></i> 快传</div>
          <div class="cz_box" @click="dynamicId=item.id"><i class="iconfont icon-pinglun" ></i> 评论</div>
          <div class="cz_box" @click="dzClick1($event,item.id,index)"><i
              :class="item.isLiked?'iconfont icon-dianzan_kuai f_color':'iconfont icon-dianzan' "></i> {{ item.likes }}
          </div>
        </div>
        <div style="margin-top: 30px">
          <div class="part_line" v-show="index !== dynamic_list.length-1"></div>
        </div>

      </div>
      <h1 v-show="dynamic_list.length === 0" style="margin-left: 20px;color: #cdcdcd">用户未发布动态</h1>
    </div>
    <div v-else>
      <dynamic-detail :id="dynamicId" @back="back" @setRecover="setRecover" @setReview="setReview"></dynamic-detail>
    </div>
  </div>

</template>

<style scoped>
.cont_cont_box {
  width: 90%;
  margin: 0 auto;
  padding-bottom: 0;
}

.part_line {
  margin: 10px auto;
  width: 100%;
  height: 1px;
  border-top: 1px solid #cdcdcd;
}
</style>